<template>
  <div>
    <slot></slot>
    <div class="w">
      <ul class="layouts-shared">
        <li v-for="item in info" :key="item.id" @click="toDetail(item.id)">
          <div class="cart">
            <img :src="'http://sc.wolfcode.cn' + item.coverImg" alt="" />
            <p class="cart__title">{{ item.name }}</p>
            <div class="cart__price">
              <span>{{ item.coin }}</span>
              <img src="../../assets/img/monad.png" alt="" />
            </div>
            <div class="cart__btn">立即兑换</div>
            <div class="cart__imglist">
              <img
                src="../../assets/img/section_hot.png"
                alt=""
                class="cart__img1"
                v-if="item.isHotSale"
              />
              <img
                src="../../assets/img/section_new.png"
                alt=""
                class="cart__img1"
                v-if="item.isLatest"
              />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template> 

<script>
import router from "@/router";
export default {
  name: "CartItem",
  props: ["info"],
  data() {
    return {};
  },
  methods: {
    toDetail(id) {
      // router.push(`/details/${id}`);
      router.push({
        name: "Details",
        params: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.layouts-shared {
  width: 1220px;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
  li {
    float: left;
    cursor: pointer;
    width: 285px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.cart {
  background-color: #fff;
  position: relative;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.8s;
  img {
    vertical-align: middle;
  }
  &:hover {
    transform: translateY(-12px);
    .cart__btn {
      background-color: #0a328e;
      color: #fff;
    }
  }
  &__title {
    margin: 22px 0 16px;
    font-size: 18px;
    color: #333;
  }
  &__price {
    span {
      font-size: 18px;
      color: #fd604d;
      display: inline-block;
      margin-bottom: 20px;
      font-weight: 700;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }
  &__btn {
    width: 100px;
    height: 36px;
    border: 1px solid #0a328e;
    line-height: 36px;
    color: #0a328e;
    cursor: pointer;
    margin: auto;
    text-align: center;
  }
  &__imglist {
    position: absolute;
    left: 0;
    top: 0;
  }
  &__img1 {
    float: left;
  }
}
</style>